import React,{useState,useEffect} from 'react'
import {useNavigate} from "react-router-dom"

function Myheader() {
  let timmer = null;
  let arr = [
    "首页",
    "分类",
    "排行",
    "免费",
    "包月"
  ]
  // 数组是响应式，我们通过数组的下标来修改渲染的内容，非响应式的页面不会render
  let [val,setVal] = useState(["aaaaa","bbbbbb","cccccccc"])
  let [index,setIndex] = useState(0)
  let navigate = useNavigate();
  let goSearch = ()=>{
    navigate("/search",{
        state:{
            val,
            index
        }
    })
  }
  let goClassfily = ()=>{
    navigate("/classfily")
  }
  useEffect(()=>{
      timmer = setTimeout(()=>{
            setIndex(index+1)
            if (index > val.length -1) {
                setIndex(0)
            }
        },3000)
        return ()=>{ // 组件卸载的生命周期
           clearTimeout(timmer)
        }
    
  },[index])
  return (
   <>
       <div className='myheader'>
          <div>图标</div>
          <div onClick={goSearch}>{val[index]}</div>
          <div onClick={()=>navigate("/bookshelf")}>书架</div>
          <div>登陆</div>
       </div>
       <div className='headerbottom'>
          {
            arr.map((item,index)=>{
              return <span key={index} onClick={goClassfily}>
                {item}
              </span>
            })
          }
       </div>
   </>
   
  )
}

export default Myheader